<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .template-conatiner {
            border-bottom: 1px solid #eee;
            line-height: 35px;
            padding-left: 10px;
            position: relative;
            cursor: pointer;
        }

        .package-container {
            border-bottom: 1px solid #eee;
        }

        .package-container > div {
            display: inline-block;
            border-bottom: 1px solid #f00;
            margin-bottom: -1px;
            padding: 0 5px;
        }
    </style>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="widget  no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon typcn typcn-th-large-outline"></i>
                    <span class="widget-caption">流程创建</span>
                </div>
                <div class="widget-body">
                    <div class="row" id="row">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="template" style="display: none;">
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="padding-top: 10px; padding-bottom: 15px;">
        <div class="package-container">
            <div style=" "></div>
        </div>
        <div></div>
    </div>
    <div class="template-conatiner">
        <i></i>
        <span></span>
    </div>
</div>
<script>
    var template = $("#template").children(),
            packageContainer = $(template[0]),
            templateContainer = $(template[1]);
    var row = $("#row");

    function init() {
        $.request("/workflow/package/query/all", {}, function (packageList) {
            $.request("/workflow/template/query/version/all", {}, function (templateList) {
                bindData(packageList, templateList);
            });
        });
    }

    function bindData(packageList, templateList) {
        $.each(packageList, function (i, package) {
            var packageDiv = packageContainer.clone();
            row.append(packageDiv);
            var children = packageDiv.children();
            var childrenTemplate = templateList.where(package.id, "packageId");
            $(children[0]).find("div").html(package.packageName + "(" + childrenTemplate.length + ")");

            bindTemplate($(children[1]), childrenTemplate);
        });
    }


    function bindTemplate(parentContainer, templateList) {
        $.each(templateList, function (i, val) {
            var container = templateContainer.clone();
            var span = container.find("span"), i = container.find("i");
            span.html(val.templateName);
            i.addClass(val.imgurl);
            parentContainer.append(container);
            container.click(function () {
                debugger;

                var parm = {
                    templateId: val.id
                }
                util.openUrl("/views/workflow/wfprove.html?P=" + encodeURIComponent($.toJSON(parm)));


            })
        });
    }
</script>
</body>
</html>